<template>
  <view class="container">
    <navbar title="首页" bgc="#347dfd" titleColor="white" :isShowIcon="false"></navbar>
    <view>
      <view class="header"></view>
      <view class="body">
        <view class="tabs" @click="onClickTabs">
          <text mark:info="3" :class="{active:tabsStatus =='3' }">货源信息列表</text>
          <text mark:info="4" :class="{active:tabsStatus =='4' }">车辆信息列表</text>
        </view>
        <view v-if="tabsStatus == 3" class="content" style="margin-top: 20rpx;">
          <view class="item1" @click="gotoOrderDetail(1, item)" v-for="item in HuoYuanlist" :key="item.id">
            <view class="item-issue-time1">发布时间：{{item.createTime}}</view>
            <view class="item-box1">
              <view class="item-box1-user">
                <view class="box1-user-left">
                  <image :src="item.userLogo?baseImageUrl + item.userLogo: '/static/images/Ellipse66@2x.png'" mode="">
                  </image>c
                  <text>{{item.userName}}</text>
                </view>
                <view class="box1-user-right">
                  理想价格：￥{{item.idealPrice}}美元
                </view>
              </view>
              <view class="contact-people">
                <text>车辆要求：{{item.carRequire}}</text>
                <view class="submit-button">下单</view>
              </view>
              <view class="item-main1">
                <image src="/static/images/Group48097783@2x.png" mode=""></image>
                <view class="item-userinfo1">
                  <text>{{item.departure}}</text>
                  <!-- <text>{{item.departure}}</text> -->
                </view>
              </view>
              <image class="middle-image" src="/static/images/Group2650@2x.png" mode=""></image>
              <view class="item-main1">
                <image src="/static/images/Group2648@2x.png" mode=""></image>
                <view class="item-userinfo1">
                  <text>{{item.destination}}</text>
                  <!-- <text>{{item.destination}}</text> -->
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="content" style="margin-top: 20rpx;">
          <view class="item1" @click="gotoOrderDetail(2, item)" v-for="item in celiangList" :key="item.id">
            <view class="item-issue-time1">发布时间：{{item.createTime}}</view>
            <view class="item1-body">
              <view v-if="item?.image?.length" class="image-upload-box">
                <image :src="baseImageUrl + img" mode="" v-for="img in item.image" :key="img"></image>
              </view>
              <image v-else src="/static/images/image172@2x.png" mode=""></image>
              <view class="item1-body-content">
                <view class="item-content-online">
                  <text>联系人：{{item.userName}}</text>
                  <text>车辆类型：{{item.carType}}</text>
                </view>
                <view class="item-content-online">
                  <text>能去的国家：{{item.crossCountry}}</text>
                  <text>能去的城市：{{item.crossCity}}</text>
                </view>
              </view>
              <view style="margin-top: 20rpx;">
                <FooterBottom @onclick="submit" title="下单"></FooterBottom>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="footer" style="margin-top: 140rpx;">
          <FooterBottom @onclick="submit" title="下单"></FooterBottom>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabsStatus: '3',
        HuoYuanlist: [],
        celiangList: [],
        baseImageUrl: uni.gRequest.file,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0
      };
    },
    onLoad() {
      this.getHuoYuanList()
    },
    onShow() {
      this.HuoYuanlist = []
      this.celiangList = []
      this.getHuoYuanList()
      this.getCarList()
    },
    methods: {
      // 获取货源列表
      async getHuoYuanList() {
        this.isLoading = true
        uni.showLoading({
          title: '加载中...'
        })
        const res = await uni.gRequest.get('/app/demand/dlist', {
          type: 3,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.HuoYuanlist = [...this.HuoYuanlist, ...res.rows] || []
        // 实现分页功能
        this.total = res.total
        this.isLoading = false
        uni.hideLoading()
      },
      // 获取车辆列表
      async getCarList() {
        this.isLoading = true
        uni.showLoading({
          title: '加载中...'
        })
        const res = await uni.gRequest.get('/app/demand/dlist', {
          type: 4,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.celiangList = res.rows
        // 实现分页功能
        this.total = res.total
        this.isLoading = false
        uni.hideLoading()
        this.celiangList = this.celiangList.map(item => {
          if (item.image) {
            item.image = item.image.split(',')
          }
          return item
        })
      },
      onClickTabs(e) {
        this.HuoYuanlist = []
        this.celiangList = []
        const status = e.mark.info
        this.tabsStatus = status
        this.pageNum = 1
        status == 3 ? this.getHuoYuanList() : this.getCarList()
      },
      gotoOrderDetail(index, item) {
        if (index == 1) {
          uni.navigateTo({
            url: '/pages/huoyuan_order_detail/huoyuan_order_detail?id=' + item.id
          })
        } else {
          uni.navigateTo({
            url: '/pages/celiang_order_detail/celiang_order_detail?id=' + item.id
          })
        }
      },
    },
    // 触底刷新
    onReachBottom() {
      if (this.isLoading) return
      if (this.pageNum * this.pageSize >= this.total) {
        return uni.showToast({
          title: '已加载到底部...',
          duration: 500,
          icon: 'none'
        })
      }

      this.pageNum++
      if (this.tabsStatus == 3) {
        this.getHuoYuanList()
      } else if (this.tabsStatus == 4) {
        this.getCarList()
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .container {
    height: 100%;
  }

  .header {
    height: 240rpx;
    background-color: #347dfd;
  }

  .body {
    padding: 4rpx 30rpx 30rpx;
    margin-top: -50rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #FFF;
  }

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      padding: 20rpx 0;

      &.active {
        color: #347DFD;
        ;
      }
    }
  }

  .item1 {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;

    .item1-body {
      image {
        width: 387rpx;
        height: 232rpx;
        display: block;
        margin: 0 auto;
      }

      .image-upload-box {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx;

        image {
          width: 140rpx;
          height: 110rpx;
          display: inline-block;
          margin: 0 8rpx;
        }
      }

      .item1-body-content {
        .item-content-online {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24rpx;
          font-size: 26rpx;
          color: #000000;

          &:last-child {
            margin-bottom: 0;
          }


          text {
            flex: 1;
          }
        }
      }
    }


    .item-issue-time1 {
      padding: 0 0 20rpx;
      border-bottom: 1rpx #999 dotted;
    }

    .item-box1-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      padding-top: 10rpx;

      .box1-user-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 32rpx;
        color: #000000;

        image {
          width: 60rpx;
          height: 60rpx;
          margin-right: 20rpx;
        }
      }

      .box1-user-right {
        font-size: 26rpx;
        color: #E14628;
        padding-right: 10rpx;
      }
    }

    .contact-people {
      padding: 40rpx 0 20rpx;
      font-size: 32rpx;
      color: #000000;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .submit-button {
        background: linear-gradient(90deg, #347DFD 0%, #4EA0FF 100%);
        box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(12, 101, 255, 0.2);
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        padding: 10rpx 60rpx;
        color: white;
      }
    }

    .middle-image {
      width: 15rpx;
      height: 25rpx;
      margin-left: 13rpx
    }

    .item-main1 {
      font-size: 26rpx;
      color: #000000;
      display: flex;
      align-items: center;
      padding: 15rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      .item-userinfo1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 20rpx;
        color: #999999;

        text:first-child {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }
</style>
